<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />

    <style type="text/css">
        * {
            margin: auto;
            padding: 0
        }

        #img {
            background-color: white;
            text-align: center;
            height: 180px;
            margin: 5% 5%;
            border: 1px solid #20B2AA;
            border-radius: 10px;
        }

        #img div {
            width: 200px;
            color: #003C9D;
            margin: auto;
            text-align: center;
        }

        #show {
            width: 50%;
            height: 155px;
            margin: 0 auto;
        }
    </style>
</head>

<body style="background-color:white;">
    <form id="form_file">
        <input type="file" style="display:none;" id="file" name="file" accept="image/*;capture=camera" onchange="check()">
    </form>

    <div id="img" onclick="replace()">
        <img id="show" src="../image/camera.png" alt="点击拍摄车牌" />
        <div id="msgw">点击图片进行拍摄</div>
    </div>

    <section class="aui-content-padded aui-margin-t-15">
        <form>
            <ul class="aui-list aui-form-list" style="border-left:1px solid #ddd;border-right:1px solid #ddd;border-radius:3px">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label aui-border-r color-orange">
                            车主姓名
                            <!-- <small class="aui-margin-l-5 aui-text-warning">+86</small> -->
                        </div>
                        <div class="aui-list-item-input aui-padded-l-10">
                            <input class="carInf" type="text" style="color:#003C9D;">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label aui-border-r color-orange">
                            车牌颜色
                        </div>
                        <div class="aui-list-item-input aui-padded-l-10">
                            <select name="choose" id="choose" style="color:#003C9D;">
                              <option value="blue">蓝色</option>
                              <option value="white">白色</option>
                              <option value="yellow">黄色</option>
                              </select>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label aui-border-r color-orange">
                            车辆牌号
                        </div>
                        <div class="aui-list-item-input aui-padded-l-10">
                            <input class="carInf" id="carNumber" type="text" style="color:#003C9D;">
                        </div>
                    </div>
                </li>
            </ul>
        </form>
    </section>
    <section class="aui-content-padded">
        <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" style="background-color:#03a9f4;height:45px;line-height:48px;!important">上传</div>
    </section>

    <script type="text/javascript" src="../script/properties.js"></script>
    <script type="text/javascript" src="../script/zepto.min.js"></script>
    <script>
        // var input = document.getElementsByTagName('input')[0];
        // var divElem = document.getElementsByTagName('div')[0];

        // divElem.addEventListener('click', function(e) {
        //     e.preventDefault();
        //     e.stopPropagation();
        //     input.click();
        // });
        function replace(){
          var input = document.getElementsByTagName('input')[0];
            input.click();
        }
    </script>

    <script>
        function check() {
            // api.showProgress({
            //     style: 'default',
            //     animationType: 'fade',
            //     title: '努力加载中...',
            //     text: '先喝杯茶...',
            //     modal: false
            // });
            $("#img").attr("onclick","");
            f = document.getElementById('file').files[0];
            if(f == undefined){
              $("#img").attr("onclick","replace()");
              return false;
            }
            document.getElementById('msgw').innerHTML = "正在识别,请稍等";
            //预览图片
            var r = new FileReader();
            r.readAsDataURL(f);
            r.onload = function(e) {
                document.getElementById('show').src = this.result;
            };
            var file = new FormData($('#form_file')[0]);
            //上传识别
            $.ajax({
                url: URL + "edit/check",
                type: "post",
                data: file,
                contentType: false,
                processData: false,
                success: function(data) {
                    // api.hideProgress();
                    var result = eval("(" + data + ")");
                    console.log(JSON.stringify(result));
                    if (result.error_msg != null) {
                        document.getElementById('msgw').innerHTML = "识别失败,上传正确的图片";
                    } else {
                        $('#carNumber').val(result.words_result.number);
                        $('#choose').val(result.words_result.color);
                        document.getElementById('msgw').innerHTML = "识别成功";
                    }
                    console.log("okok");
                  $("#img").attr("onclick","replace()");

                },
                error: function() {
                    // api.hideProgress();
                    console.log("koko");
                      $("#img").attr("onclick","replace()");
                    alert("网络错误,请重试");

                }

            });
        }
    </script>



</body>
<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
    };
</script>

</html>
